<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>球局列表页原型</title>
  <style>
    /* ===== 全局重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                   "PingFang SC", "Hiragino Sans GB",
                   "Microsoft YaHei", sans-serif;
      background-color: #faf9f5;
      color: #333333;
      font-size: 14px;
      line-height: 1.4;
      height: 100%;
    }

    /* ===== 页面容器 ===== */
    .container {
      max-width: 480px;
      margin: 0 auto;
      background-color: #ffffff;
      min-height: 100%;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* ===== 顶部导航栏 ===== */
    .topNavBar {
      background-color: #ffffff;
      border-bottom: 1px solid #e0e0e0;
      padding: 12px 16px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .navLeft {
      width: 40px;
    }

    .backButton {
      font-size: 24px;
      color: #333333;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    .navCenter {
      flex: 1;
      text-align: center;
    }

    .pageTitle {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }

    .iconButton {
      font-size: 20px;
      color: #333333;
      border: none;
      background: none;
      cursor: pointer;
      padding: 0;
    }

    /* ===== 搜索区域 ===== */
    .searchSection {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .searchBox {
      background-color: #ffffff;
      border: 2px solid #e0e0e0;
      border-radius: 20px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    .searchInput {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 14px;
      color: #333333;
      outline: none;
    }

    .searchInput::placeholder {
      color: #999999;
    }

    .searchBtn {
      background: transparent;
      border: none;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      white-space: nowrap;
      color: #333333;
    }

    /* ===== 筛选栏 ===== */
    .filterSection {
      padding: 0 16px 16px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
    }

    .filterItem {
      background-color: transparent;
      border: none;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 13px;
      color: #666666;
      padding: 0 8px;
      gap: 4px;
    }

    /* 第一个筛选项的右侧分隔线 */
    .filterItem:first-child {
      padding-right: 16px;
    }

    .filterText {
      font-size: 13px;
      color: #666666;
    }

    .filterArrow {
      font-size: 12px;
      color: #999999;
    }

    /* ===== 球局列表 ===== */
    .gameList {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .gameCard {
      background-color: #ffffff;
      border: none;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 0;
      padding: 12px 16px;
      display: flex;
      gap: 12px;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;
      min-height: 110px;
      box-sizing: border-box;
    }

    .gameCard:hover {
      background-color: #fafafa;
    }

    /* 球局缩略图 */
    .gameThumbnail {
      width: 140px;
      height: 100%;
      min-height: 90px;
      flex-shrink: 0;
      background-color: #e8e8e8;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }

    /* 十字交叉线 */
    .gameThumbnail::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 1px;
      background: linear-gradient(to right, transparent, #cccccc, transparent);
      z-index: 1;
    }

    .gameThumbnail::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 70%;
      background: linear-gradient(to bottom, transparent, #cccccc, transparent);
      z-index: 1;
    }

    .placeholderText {
      position: relative;
      z-index: 2;
      font-size: 11px;
      color: #999999;
    }

    /* 球局信息区 */
    .gameInfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
    }

    /* 标题行（球局名称 + 状态） */
    .gameHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .gameName {
      font-size: 14px;
      font-weight: 500;
      color: #333333;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .gameStatus {
      font-size: 11px;
      color: #999999;
      white-space: nowrap;
      padding: 2px 8px;
      border-radius: 3px;
      background-color: #f5f5f5;
      flex-shrink: 0;
    }

    .gameStatus.finished {
      color: #999999;
      background-color: #f5f5f5;
    }

    .gameStatus.active {
      color: #333333;
      background-color: #f5f5f5;
      border: 1px solid #d0d0d0;
    }

    .gameStatus.upcoming {
      color: #666666;
      background-color: #f5f5f5;
    }

    /* 位置信息行 */
    .gameLocation {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .locationIcon {
      width: 12px;
      height: 12px;
      background-color: #d0d0d0;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .venueName {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 时间信息行 */
    .gameTime {
      font-size: 12px;
      color: #999999;
    }

    /* 标签区域 */
    .gameTags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: auto;
    }

    .gameTag {
      display: inline-block;
      background-color: #f5f5f5;
      border: 1px solid #d0d0d0;
      padding: 0 8px;
      border-radius: 3px;
      font-size: 11px;
      color: #666666;
      font-weight: 500;
    }

    /* ===== 空状态 ===== */
    .emptyState {
      text-align: center;
      padding: 60px 20px;
    }

    .emptyIcon {
      width: 80px;
      height: 80px;
      border: 2px solid #d0d0d0;
      border-radius: 8px;
      background-color: #fafafa;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #999999;
      margin-bottom: 16px;
    }

    .emptyText {
      font-size: 14px;
      color: #999999;
    }

    /* ===== 浮动创建按钮 ===== */
    .createGameButton {
      position: absolute;
      bottom: 20px;
      right: 20px;
      min-width: 120px;
      height: 44px;
      padding: 0 20px;
      border-radius: 8px;
      background-color: #333333;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;
      z-index: 50;
    }

    .createIcon {
      width: 18px;
      height: 18px;
      border: 2px solid #ffffff;
      border-radius: 4px;
      background-color: transparent;
      position: relative;
      flex-shrink: 0;
    }

    .createIcon::before {
      content: '+';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #ffffff;
      line-height: 1;
      font-weight: 400;
    }

    .createText {
      font-size: 14px;
      font-weight: 500;
      color: #ffffff;
      white-space: nowrap;
    }

    .createGameButton:hover {
      background-color: #2a2a2a;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      transform: translateY(-2px);
    }

    .createGameButton:active {
      transform: translateY(0);
    }

    /* ===== 响应式调整 ===== */
    @media (max-width: 375px) {
      .gameCard {
        padding: 10px 12px;
        gap: 10px;
      }

      .gameThumbnail {
        width: 120px;
      }

      .gameName {
        font-size: 13px;
      }

      .createGameButton {
        bottom: 20px;
        right: 16px;
        min-width: 110px;
        height: 40px;
        padding: 0 16px;
      }

      .createText {
        font-size: 13px;
      }

      .createIcon {
        width: 16px;
        height: 16px;
      }

      .createIcon::before {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部导航栏 -->
    <div class="topNavBar">
      <div class="navLeft">
        <button class="backButton">‹</button>
      </div>
      <div class="navCenter">
        <div class="pageTitle">球局</div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <section class="searchSection">
      <div class="searchBox">
        <input type="text" class="searchInput" placeholder="搜索球局">
      </div>
      <button class="searchBtn">搜索</button>
    </section>

    <!-- 筛选栏 -->
    <section class="filterSection">
      <div class="filterItem">
        <span class="filterText">球局名称</span>
        <span class="filterArrow">▽</span>
      </div>
      <div class="filterItem">
        <span class="filterText">球局类型</span>
        <span class="filterArrow">▽</span>
      </div>
      <div class="filterItem">
        <span class="filterText">所属球馆</span>
        <span class="filterArrow">▽</span>
      </div>
    </section>

    <!-- 球局列表 -->
    <section class="gameList">
      <!-- 球局卡片 1 -->
      <article class="gameCard">
        <div class="gameThumbnail">
          <span class="placeholderText">图片占位</span>
        </div>
        <div class="gameInfo">
          <div class="gameHeader">
            <div class="gameName">蓝天霸主局</div>
            <div class="gameStatus finished">已结束</div>
          </div>
          <div class="gameLocation">
            <span class="locationIcon"></span>
            <span class="venueName">众乐谷丰路足球训练基地</span>
          </div>
          <div class="gameTime">2025-10-29 14:00</div>
          <div class="gameTags">
            <span class="gameTag">足球</span>
          </div>
        </div>
      </article>

      <!-- 球局卡片 2 -->
      <article class="gameCard">
        <div class="gameThumbnail">
          <span class="placeholderText">图片占位</span>
        </div>
        <div class="gameInfo">
          <div class="gameHeader">
            <div class="gameName">周末友谊赛</div>
            <div class="gameStatus active">进行中</div>
          </div>
          <div class="gameLocation">
            <span class="locationIcon"></span>
            <span class="venueName">湘超比赛体育场</span>
          </div>
          <div class="gameTime">2025-11-05 19:00</div>
          <div class="gameTags">
            <span class="gameTag">足球</span>
          </div>
        </div>
      </article>

      <!-- 球局卡片 3 -->
      <article class="gameCard">
        <div class="gameThumbnail">
          <span class="placeholderText">图片占位</span>
        </div>
        <div class="gameInfo">
          <div class="gameHeader">
            <div class="gameName">城市之光篮球赛</div>
            <div class="gameStatus finished">已结束</div>
          </div>
          <div class="gameLocation">
            <span class="locationIcon"></span>
            <span class="venueName">城市主场南昌红谷滩店</span>
          </div>
          <div class="gameTime">2025-10-28 18:30</div>
          <div class="gameTags">
            <span class="gameTag">篮球</span>
          </div>
        </div>
      </article>

      <!-- 球局卡片 4 -->
      <article class="gameCard">
        <div class="gameThumbnail">
          <span class="placeholderText">图片占位</span>
        </div>
        <div class="gameInfo">
          <div class="gameHeader">
            <div class="gameName">校园足球联赛</div>
            <div class="gameStatus active">进行中</div>
          </div>
          <div class="gameLocation">
            <span class="locationIcon"></span>
            <span class="venueName">南昌元享体育运动中心</span>
          </div>
          <div class="gameTime">2025-11-06 15:00</div>
          <div class="gameTags">
            <span class="gameTag">足球</span>
          </div>
        </div>
      </article>

      <!-- 球局卡片 5 -->
      <article class="gameCard">
        <div class="gameThumbnail">
          <span class="placeholderText">图片占位</span>
        </div>
        <div class="gameInfo">
          <div class="gameHeader">
            <div class="gameName">周日晨练篮球局</div>
            <div class="gameStatus upcoming">未开始</div>
          </div>
          <div class="gameLocation">
            <span class="locationIcon"></span>
            <span class="venueName">城市主场南昌红谷滩店</span>
          </div>
          <div class="gameTime">2025-11-09 08:00</div>
          <div class="gameTags">
            <span class="gameTag">篮球</span>
          </div>
        </div>
      </article>
    </section>

    <!-- 创建球局浮动按钮 -->
    <button class="createGameButton" title="创建球局">
      <span class="createIcon"></span>
      <span class="createText">创建球局</span>
    </button>
  </div>

  <script>
    // 返回按钮
    const backButton = document.querySelector('.backButton');
    backButton.addEventListener('click', function() {
      window.location.href = '我的页面原型.html';
    });

    // 搜索按钮
    const searchInput = document.querySelector('.searchInput');
    const searchBtn = document.querySelector('.searchBtn');
    searchBtn.addEventListener('click', function() {
      const keyword = searchInput.value.trim();
      if (keyword) {
        alert(`搜索: ${keyword}`);
      }
    });

    // 筛选项点击
    const filterItems = document.querySelectorAll('.filterItem');
    filterItems.forEach((item, index) => {
      item.addEventListener('click', function() {
        const filterText = this.querySelector('.filterText').textContent;
        alert(`点击筛选: ${filterText}`);
      });
    });

    // 球局卡片点击
    const gameCards = document.querySelectorAll('.gameCard');
    gameCards.forEach(card => {
      card.addEventListener('click', function() {
        const gameName = this.querySelector('.gameName').textContent;
        alert(`跳转到: ${gameName} 详情页`);
      });
    });

    // 创建球局浮动按钮
    const createGameButton = document.querySelector('.createGameButton');
    createGameButton.addEventListener('click', function() {
      window.location.href = '创建球局页原型.html';
    });
  </script>
</body>
</html>
